<template>
  <div class="personal" v-if="profile">
    <div class="user">
      <img v-if="profile.head_img" :src="$axios.defaults.baseURL+profile.head_img" alt />
      <img v-else src="@/assets/logo.png" alt />
      <div class="name">
        <span v-if="profile.gender==1" class="iconfont iconxingbienan"></span>
        <span v-else class="iconfont iconxingbienv"></span>
        <span class="netname">{{profile.nickname}}</span>
        <div class="data">{{profile.create_date.split('T')[0]}}</div>
      </div>
      <span class="iconfont iconjiantou1 jiantou"></span>
    </div>
    <PersonalBar label="我的关注" desc="关注的用户" @barclick="jumPage('/follow')" />
    <PersonalBar label="我的跟帖" desc="跟帖/回复" @barclick="jumPage('/Comment')" />
    <PersonalBar label="我的收藏" desc="文章/视频" @barclick="jumPage('/star')" />
    <PersonalBar label="栏目管理" desc @barclick="jumPage('/categorymanage')" />
    <PersonalBar label="设置" desc @barclick="jumPage('/edit')" />
    <PersonalBar label="退出" desc @barclick="logout" />
  </div>
</template>

<script>
import PersonalBar from "@/components/PersonalBar";
export default {
  components: {
    PersonalBar
  },
  data() {
    return {
      profile: ""
    };
  },
  //   挂载获取用户数据
  mounted() {
    this.$axios({
      url: "/user/" + localStorage.getItem("userId"),
      method: "GET"
      //   headers: {
      //     Authorization: localStorage.getItem("token")
      //   }
    }).then(res => {
      console.log(res.data);
      const { message, data } = res.data;
      if (message == "获取成功") {
        this.profile = data;
      }
    });
  },
  methods: {
    jumPage(path) {
      console.log(path);
      this.$router.push({
        path
      });
    },
    logout() {
      localStorage.removeItem("token");
      localStorage.removeItem("userId");
      this.$router.replace({
        path: "/login"
      });
    }
  }
};
</script>

<style lang='less'>
.personal {
  background-color: #f2f2f2;
  .user {
    display: flex;
    align-items: center;
    padding: 8.333vw 5.556vw;
    border-bottom: 5px solid #e4e4e4;
    img {
      width: 19.444vw;
      height: 19.444vw;
      border-radius: 50%;
      //   background-color: pink;
    }
    .name {
      padding-left: 5.556vw;
      .iconxingbienan {
        color: #74b9eb;
      }
      .iconxingbienv {
        color: pink;
      }
      .netname {
        padding-left: 2.778vw;
      }
      .data {
        padding-top: 1.389vw;
        color: #b6b6b6;
      }
    }
    .jiantou {
      font-weight: 700;
      color: #dddddd;
      font-size: 5.556vw;
      padding-left: 33.333vw;
    }
  }
}
</style>